
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<jsp:include page="../Common/header.jsp"></jsp:include>
<!-- Content Wrapper. Contains page content -->

<!-- 上传头像 -->
<div class="modal" id="myModal">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-label="Close">
					<span aria-hidden="true">×</span>
				</button>
				<h4 class="modal-title">上传头像</h4>
			</div>
			<div class="modal-body">
				<form id="upLoadPhotoForm"
					action="${pageContext.request.contextPath}/user/uploadUserPhoto"
					method="post" enctype="multipart/form-data">
					<input name="file" id="photoinput" type="file" /> <img
						style="width: 170px; height: 170px;" id="LoadPhoto" src="<c:url value="/resources/img/默认.png" />"></img>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default pull-left"
					data-dismiss="modal">关闭</button>
				<form method="post" id="updatePhotoForm"
					action="${pageContext.request.contextPath}/userManager/updatePhoto">
					<input id="photourl" type="hidden" name="photourl" value="">
					<input id="id" type="hidden" name="id" />
					<input type="hidden" id="x" name="x" value=""> <input
						type="hidden" id="y" name="y" value=""> <input
						type="hidden" id="w" name="w" value=""> <input
						type="hidden" id="h" name="h" value="">
					<button type="submit" class="btn btn-primary">保存</button>
				</form>
			</div>
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal-dialog -->
</div>
<!-- 上传头像 -->

<!-- 确认删除模态框 -->


<div id="delDialog" class="modal">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-label="Close">
					<span aria-hidden="true">×</span>
				</button>
				<h4 class="modal-title">提示</h4>
			</div>
			<div class="modal-body">
				<p>是否确认删除</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default pull-left"
					data-dismiss="modal">取消</button>
				<button onclick="del()" type="button" class="btn btn-primary">确认</button>
			</div>
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal-dialog -->
</div>

<!-- 确认删除模态框 -->

<!-- 修改密码模态框 -->


<div id="changePasswordDialog" class="modal">
	<div class="modal-dialog">
		<div class="modal-content">
			<form method="post" action="<c:url value="/userManager/doChangePassword" />">
					<div class="box-body">
						<div class="form-group">
							<label for="password">新密码</label> <input type="password"
								class="form-control" name="password" id="password"
								placeholder="新密码">
						</div>
						<div class="form-group">
							<label for="repassword">确认密码</label> <input type="password"
								class="form-control" name="repassword" id="repassword"
								placeholder="确认密码">
						</div>
						<input id="id" type="hidden" name="id" />

					</div>
					<!-- /.box-body -->

					<div class="box-footer">
						<button type="submit" class="btn btn-primary">保存</button>
					</div>
				</form>
			
			
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal-dialog -->
</div>

<!-- 修改密码模态框 -->

<!-- 新增用户模态框 -->


<div id="addUserDialog" class="modal">
	<div class="modal-dialog">
		<div class="modal-content">
			<form method="post" action="<c:url value="/userManager/doAddUser" />">
					<div class="box-body">
						<div class="form-group">
							<label for="password">员工编号</label> <input type="text"
								class="form-control" name="accountName" id="accountName"
								placeholder="员工编号">
						</div>
						<div class="form-group">
							<label for="repassword">登陆密码</label> <input type="password"
								class="form-control" name="password" id="password"
								placeholder="登陆密码">
						</div>

					</div>
					<!-- /.box-body -->

					<div class="box-footer">
						<button type="submit" class="btn btn-primary">保存</button>
					</div>
				</form>
			
			
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal-dialog -->
</div>

<!-- 新增用户模态框 -->


<div class="content-wrapper">
	<section class="content-header">
		<h1>用户管理</h1>
		<ol class="breadcrumb">
			<li><a href="<c:url value="/Admin/index" />"><i
					class="fa fa-dashboard"></i> Home</a></li>

			<c:forEach items="${routers}" var="router">
				<li><i class="${router.icon}"></i><a href="javascript:void(0)">&nbsp&nbsp${router.name
						}</a></li>
			</c:forEach>

		</ol>
	</section>

	<section class="content">

		<div class="page-header clearfix">
			<h1 class="col-sm-8"></h1>
			<div class="col-sm-4">
				<form name="form_search" id="form_search" method="post"
					class="pull-right">
					<div class="input-group col-20">
						<input class="form-control" type="text" name="keyword"
							id="keyword">
						<div class="input-group-btn">
							<a class="btn btn-m btn-primary" onclick="submit_search();"><i
								class="fa fa-search"></i></a>
						</div>
					</div>
				</form>
			</div>
		</div>
		<form method="post" id="form_adv_search" name="form_adv_search">
			<input type="hidden" name="ajax" id="ajax" value="1">
			<div class="operate panel panel-default">
				<div class="panel-body">
					<div class="pull-left form-inline">
						
						<a data-toggle="modal" data-target="#changePasswordDialog" class="btn btn-sm btn-primary">设置密码</a>
					</div>
					<div class="pull-right">
						<a  	data-toggle="modal" data-target="#addUserDialog" class="btn btn-sm btn-primary">新增</a> <a
							onclick="save()" class="btn btn-sm btn-primary">保存</a> | <a
						data-toggle="modal" data-target="#delDialog"
						class="btn btn-sm btn-danger">删除</a>
					</div>
				</div>
			</div>
		</form>
		<div class="box">
			<div class="box-body">


				<div class="col-sm-12">
					<form id="updateUserForm" method="post" action="/OA/userManager/update"
						class="form-horizontal">

						<table class="table table-bordered">
							<tbody>
								<tr>
									<th class="col-10"><nobr> 员工编号* </nobr></th>
									<td colspan="2" class="col-30"><input type="text" id="accountName" name="accountName"
										class="form-control" readonly="readonly" value=""></td>

									<td rowspan="3" class="col-20"><img
										style="width: 170px; height: 170px;"
										class="img-thumbnail col-12" id="photo"
										src=""></td>
								</tr>
								<tr>
									<th>姓名*</th>
									<td colspan="2"><input type="text" class="form-control" id="name" name="name"
										></td>

								</tr>
								<tr>
									<th>性别</th>
									<td colspan="2"><select name="sex" id="sex"
										class="form-control col-10">


											<option value="1">男</option>
											<option value="0">女</option>



									</select></td>
								</tr>
								<tr>
									<th>生日</th>
									<td colspan="2"><input type="text" id="birthday"
										name="birthday" readonly="readonly"
										class="input-date form-control" value=""></td>
									<td colspan="2"><a onclick="select_avatar();"
										class="btn btn-sm btn-primary" data-toggle="modal"
										data-target="#myModal">上传头像</a></td>
								</tr>
								<tr>
									<th>部门*</th>
									<td class="col-20">
										<input type="text" id="dept_name" onclick="openNewWin()"
										class="form-control" readonly="readonly" value="">
										<input type="hidden" id="dept_id" name="dept.id">
									</td>
									<th class="col-10">职位</th>
									<td>
										<select class="form-control" id="position" name="position.id">
									
											<c:forEach  items="${positions}" var="position" >
												<option value="${position.id}">${position.name}</option>
											</c:forEach>
										
									</select>
									</td>
								</tr> 
								<tr>
									<th><nobr> 办公室电话 </nobr></th>
									<td><input type="text"  name="phone" id="phone"
										class="form-control" value=""></td>
									<th><nobr> 移动电话 </nobr></th>
									<td><input type="text" name="mobilePhone" id="mobilePhone"
										class="form-control" value=""></td>
								</tr>
								<tr>
								</tr>
								<tr>
									<th>电子邮箱</th>
									<td colspan="3"><input type="text" class="form-control" id="email" name="email"
										value=""></td>

								</tr>
								<tr>
									<th><nobr> 负责业务 </nobr></th>
									<td colspan="3"><input type="text" id="business"
										name="business" class="form-control" value=""></td>
								</tr>

								 <tr>
									<th><nobr> 状态 </nobr></th>
									<td colspan="3"><select class="form-control" name="status"
										id="status">
											<option value="1" selected="selected">启用</option>
											<option value="0">禁用</option>
									</select></td>
								</tr> 
							</tbody>
						</table>
						
						<input type="hidden" name="id" id="id" >
					</form>

				</div>

				<div class="col-sm-12">
					<table id="userstable" class="table table-bordered table-hover">
						<thead>
							<tr>
								<th>员工编号</th>
								<th>姓名</th>
								<th>状态</th>

							</tr>
						</thead>
						<tbody>
						<c:forEach var="user" items="${users}">
							<tr id="${user.id }">
								<td>${user.accountName }</td>
								<td>${user.name }</td>
								<td>${user.status==true?"启用":"禁用" }</td>
							</tr>
							</c:forEach>
						</tbody>
					</table>
				</div>



			</div>
		</div>
	</section>

</div>
<!-- /.content-wrapper -->
<jsp:include page="../Common/footer.jsp"></jsp:include>
<script type="text/javascript">
	//绑定日期选择器
	$("#birthday").datepicker({
		format : 'yyyy-mm-dd',
		language : 'zh-CN',
	});
	
	$.ajaxSetup({   
        contentType:"application/x-www-form-urlencoded;charset=utf-8",   
        complete:function(XMLHttpRequest,textStatus){ 
          var sessionstatus=XMLHttpRequest.getResponseHeader("sessionstatus"); //通过XMLHttpRequest取得响应头，sessionstatus，  
              if(sessionstatus=="timeout"){ 
                  alert("登录超时,请重新登录！");
              //如果超时就处理 ，指定要跳转的页面  
                window.location.reload();   
              }   
           }   
      }); 

	$('#userstable').DataTable({
		"initComplete": function () {
            var api = this.api();
            api.$('tr').click( function () {
            	 api.$('tr').attr("class", "");
        		$(this).attr("class", "active");
        		
        		//获取用户信息
        		 	$.post("<c:url value='/userManager/getUser' />", {
    			id : $(this).attr("id"),
    		}, function(data, status) {
    	
    			
    			if (data == "" || data == null)
    				return;
    			data = eval(data);
    			$("#updateUserForm #name").val(data.name);
    			$("#updateUserForm #photo").attr("src","/OA/"+data.photo);
    			$("#updateUserForm #accountName").val(data.accountName);
    			$("#updateUserForm #sex").val(data.sex==true?1:0);
    			$("#updateUserForm #birthday").val(data.birthday);
    			$("#updateUserForm #phone").val(data.phone);
    			$("#updateUserForm #mobilePhone").val(data.mobilePhone);
    			$("#updateUserForm #email").val(data.email);
    			$("#updateUserForm #business").val(data.business);
    			$("#updateUserForm #status").val(data.status==true?1:0);
    			$("#updateUserForm #position").val(data.position==null?0:data.position.id);
    			$("#updateUserForm #dept_name").val(data.dept==null?"":data.dept.name);
    			$("#updateUserForm #dept_id").val(data.dept==null?"":data.dept.id);
    			$("#updateUserForm #id").val(data.id);
    			$("#updatePhotoForm #id").val(data.id);
    			$("#changePasswordDialog #id").val(data.id);
    			
    			

    		}); 
        		
        		
            } );
        },
		"paging" : true,
		"lengthChange" : true,
		"searching" : true,
		"ordering" : true,
		"info" : true,
		"autoWidth" : false,
		"language": {  
			"sLengthMenu": "每页显示  _MENU_ 条记录",  
            "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "前一页",
                "sNext": "后一页",
                "sLast": "尾页"
                },
            "sZeroRecords": "抱歉， 没有找到",
            "sInfoEmpty": "没有数据"}
	});
	
	
	function save(){
		if($("#updateUserForm #id").val()=="")
			{alert("请先选择用户");return false;}
		$("#updateUserForm").submit();
	}
	
	function del() {
		if ($("#updateUserForm #id").val() == "") {
			alert("请先选择要删除的用户");
			return;
		}
		window.location.href = "<c:url value="/userManager/delete" />" + "?id="
				+ $("#updateUserForm #id").val();
	}


	//Jscop
	var jcrop_api;

	function initJcrop()//{{{
	{		
		$('#LoadPhoto').Jcrop({
			aspectRatio : 1 / 1,
			onSelect : updateCoords
		}, function() {
			jcrop_api = this;
		});

	};

	function updateCoords(c) {
		$('#x').val(c.x);
		$('#y').val(c.y);
		$('#w').val(c.w);
		$('#h').val(c.h);
	};
	
	$('#upLoadPhotoForm').submit(function() {
		// 提交表单
		$(this).ajaxSubmit(function(message) {
			if(message=="")
				{alert("上传失败!");location.reload();return;}
			initJcrop();
			$("#LoadPhoto").attr("src", "/OA/" + message);
			$("#photourl").val(message);
			jcrop_api.setImage("/OA/" + message);
			jcrop_api.setSelect([0,0,100,100]);

		});
		// 为了防止普通浏览器进行表单提交和产生页面导航（防止页面刷新？）返回false
		return false;
	});
	
	
	//ajax提交表单
	$("#photoinput").change(function() {
	
		if($("#updateUserForm #id").val()=="")
		{
			alert("请先选择一个用户");
		
		  return false;
		}
	
		if($("#photoinput").val()=="")
			{
			  return false;
			}
		$("#upLoadPhotoForm").submit();
	});
	
	 function openNewWin()
	   {if($("#updateUserForm #id").val()=="")
		{
			alert("请先选择一个用户");
		
		  return false;
		}
	    window.open("<c:url value='/Dept/select?formname=updateUserForm' />","","height=600,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no");

	   }
	 
	 $("#changePasswordDialog form").submit(function()
			 {
		 if($("#changePasswordDialog #id").val()=="")
  	   {alert("请先选择一个用户");return false;}
		 if($("#password").val()==""||$("#repassword").val()=="")
  	   {alert("密码不能为空");return false;}
	           if($("#password").val()!=$("#repassword").val())
	        	   {alert("两次输入的密码不一致");return false;}
	 });
	 
	

</script>
